function go3(){ 
    let c = document.getElementById('lesson3')
    let ctx = c.getContext('2d')  
    //3.绘制图形
    // 3.1 绘制矩形fillRect(位置x,位置y,宽度,高度)
    let linearGradient = ctx.createLinearGradient(0,0,250,100);
    linearGradient.addColorStop(0,"red");
    linearGradient.addColorStop(0.3,"#ffcccc");
    linearGradient.addColorStop(1,"blue");
    ctx.fillStyle = linearGradient;
    ctx.fillRect(0,0,250,100);

    let index=0;
    function render(){
        index += 0.01;
        if(index >1){index =0;}
        let linearGradient = ctx.createLinearGradient(0,100,250,100);
        linearGradient.addColorStop(0,"red");
        linearGradient.addColorStop(index,"#ffcccc");
        linearGradient.addColorStop(1,"blue");
        ctx.fillStyle = linearGradient;
        ctx.fillRect(0,100,250,100);
        requestAnimationFrame(render);
    }
    requestAnimationFrame(render);  // 调用帧函数

    //镜像渐变
    let radiaGradient = ctx.createRadialGradient(350,50,0,350,50,40);
    radiaGradient.addColorStop(0,"red");
    radiaGradient.addColorStop(0.3,"#ffcccc");
    radiaGradient.addColorStop(1,"blue");
    ctx.fillStyle = radiaGradient;
    ctx.fillRect(300,0,100,100);
    //圆锥渐变  角度,x,y
    let conicalGradien = ctx.createConicGradient(Math.PI/4,450,50);
    conicalGradien.addColorStop(0,"red");
    conicalGradien.addColorStop(0.3,"#ffcccc");
    conicalGradien.addColorStop(1,"blue");
    ctx.fillStyle = conicalGradien;
    ctx.arc(450,50,50, 0, Math.PI*2 )  
    ctx.fill();
 

} 